<script setup lang="ts">
import { chatMessageWordsAddAPI, chatMessageWordsEditAPI } from '@/api/message'
import { Toast } from 'vant';
import { inject, onMounted, reactive } from 'vue';

    const props = defineProps({
        title: {
            type: String
        },
        id: {
            type: Number
        },
        text: {
            type: String
        },
    })
    const state = reactive({
        list: [],
        loading: false,
        value: props.text || ''
    })
    // 获取顶层的 关闭提交弹框 方法
     const { closeWorksAdd } = inject('popup')

    // 确认提交
    const confirmSbmit = async() => {

        if(!state.value) return Toast('请输入常用语')
        state.loading = true
        let res = null
        if (props.id) {
            // 修改接口
            res = await chatMessageWordsEditAPI({
                text: state.value,
                id: props.id
            })
        }else{
            // 添加接口
            res = await chatMessageWordsAddAPI({
                text: state.value
            })
        }
        if (res) {
            state.value = ''
            closeWorksAdd()
        }else{
            Toast(res.msg)
        }
        state.loading = false
    }
   
    // 点击返回 关闭弹框
    const onClickLeft = () => closeWorksAdd()

</script>

<template>
    <van-nav-bar :title="props.title||'添加常用语'" left-arrow @click-left="onClickLeft">
        <template #right>
            <span @click="confirmSbmit">完成</span>
        </template>
    </van-nav-bar>
    <van-field
        v-model="state.value"
        rows="10"
        autosize
        label=""
        type="textarea"
        maxlength="200"
        placeholder="请输入您的常用回复请不要填写qq、微信等联系方式或 广告信息，否则系统将封禁您的账号。"
        show-word-limit
    />

</template>
<style scoped>

>>> .van-field__word-num{
    color: #FF9415;
}
>>> .van-field__word-limit{
    color: #999999;
}
</style>